<template>
  <div class="monitor-screen">
    <div class="monitor-screen-box">
      <CompHeader/>
      <div class="monitor-screen-main">
        <div class="monitor-screen-main-content">
          <div class="monitor-screen-box-left">
            <CompDeviceInfoLeft v-if="devs.length !== 0" :devs="devs" class="box-left-1"/>
            <CompDeviceGroup
                v-if="devs.length !== 0"
                :devs="devs" class="box-left-6"
                @show-tip="showTip"
            />
          </div>
          <div class="monitor-screen-map-box">
            <CompMap v-if="devs.length !== 0"
                     :devs="devs"
                     @map-click="showTip"
            />
          </div>
          <div class="monitor-screen-box-middle">
            <CompMiddle/>
          </div>
          <div class="monitor-screen-box-right">
            <CompDeviceUtilization v-if="devs.length !== 0" :devs="devs" class="box-right-1"/>
            <CompDeviceUtilizationRank v-if="devs.length !== 0" :devs="devs" class="box-right-1"/>
            <CompDeviceUtilizationCurve class="box-right-1"/>
          </div>
        </div>
      </div>
    </div>
    <CompTip v-if="tipShow"
             :dev-info="tipDevInfo"
             @exit="exit"
             @open-monitor="monitorOpen"
    />
    <CompMonitor @close="openMonitor = false"
                 v-if="openMonitor"
                 :dev-id="monitorDevId"
    />
  </div>
</template>
<script setup>
import CompMap from "@/views/screen/component/CompMap.vue";
import CompHeader from "@/views/screen/component/CompHeader.vue";
import CompDeviceInfoLeft from "@/views/screen/component/CompDeviceInfoLeft.vue"
import CompDeviceGroup from "@/views/screen/component/CompDeviceGroup.vue";
import CompDeviceUtilization from "@/views/screen/component/CompDeviceUtilization.vue"
import CompDeviceUtilizationRank from "@/views/screen/component/CompDeviceUtilizationRank.vue"
import CompDeviceUtilizationCurve from "@/views/screen/component/CompDeviceUtilizationCurve.vue";
import CompMiddle from "@/views/screen/component/CompMiddle.vue";
import {onBeforeMount, onBeforeUpdate, onMounted, ref} from "vue";
import {listDevs} from "@/api/business/screen";
import CompTip from "./component/CompTip.vue";
import CompMonitor from "./component/CompMonitor.vue";

const devs = ref([])
const tipShow = ref(false)
const openMonitor = ref(false)
const tipDevInfo = ref({})
const monitorDevId = ref()
onMounted(() => {
  getDevs()
  setInterval(getDevs, 10000)
})

function getDevs() {
  listDevs().then((res) => {
    devs.value = res.data.sort((a, b) => {
      return b.utilization - a.utilization
    })
  })
}

function showTip(param) {
  tipShow.value = true
  tipDevInfo.value = param
}

function exit() {
  tipShow.value = false
}

function monitorOpen(deviceId) {
  monitorDevId.value = deviceId
  openMonitor.value = true

}
</script>
<style>

.monitor-screen {
  width: 100%;
  height: 100%;
  position: absolute;
}

.monitor-screen-box {
  width: 100%;
  height: 100%;
  position: relative;
}

.monitor-screen-main {
  /*border: 1px solid orange;*/
  width: 100%;
  height: 100%;
  display: flex;
  padding: 92px 8px 8px;
  flex-direction: column;
  /*justify-content: space-between;*/
  z-index: 99999;
  position: absolute;
}

.monitor-screen-main-content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  z-index: 99999;
  position: relative;
  transition: all ease 0.38s;
}

.monitor-screen-main-footer {
  transition: all ease 0.38s;
  display: none;
  width: 100%;
  height: 0;
  padding: 4px 8px 8px 8px;
  z-index: 10009;
  position: relative;
}

.monitor-screen-box-left {
  /*flex: 0 1 auto;*/
  width: 394px;
  height: 100%;
  padding: 8px;
  display: flex;
  flex-direction: column;
}

.box-left-1 {
  width: 100%;
  height: 28%
}

.box-left-6 {
  width: 100%;
  height: 72%;
  padding-top: 12px;
}

.monitor-screen-box-middle {
  color: #fff;
  flex: 1 1 auto;
  position: relative;
  height: 230px;
  align-self: flex-end;
}

.monitor-screen-box-right {
  flex: 0 1 auto;
  width: 394px;
  height: 100%;
  padding: 8px;
}

.box-right-1 {
  width: 100%;
  height: 32.5%
}

.box-right-3 {
  width: 100%;
  height: 72%;
  padding-top: 12px;
}

.monitor-screen-box-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.monitor-screen-box-left-device-info, .monitor-screen-box-right-device-info {
  width: 100%;
  height: 28%;
  overflow: hidden;
  /*margin-bottom: 16px;*/
}

.monitor-screen-box-left-device-info-box {
  height: 100%;
  /*padding: 20px 0 8px 0;*/
}

.monitor-screen-box-left-device-group, .monitor-screen-box-right-warning {
  padding-top: 16px;
  width: 100%;
  height: 72%;
  overflow: hidden;
}

.monitor-screen-map-box {
  z-index: -1;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.monitor-screen-map {
  width: 100%;
  height: 100%;
}

.fixed-whole-screen {
  height: 100% !important;
  z-index: 3000 !important;
}

.zeroOpacity {
  opacity: 0 !important;
}

.zero-width {
  width: 0 !important;
  padding: 0 !important
}

.zero-height {
  height: 0 !important
}

.configuration-screen {
  width: 100% !important;
  height: 100% !important;
}

@media screen and(max-width: 1366px) {
  .monitor-screen-box-left, .monitor-screen-box-right {
    width: 304px !important;
  }
}
</style>
